import Taro, { Component } from '@tarojs/taro'
import {ScrollView, View} from '@tarojs/components'

import './index.less'

type PageProps = {
  onSelect?: (currentFilter: any[]) => void,
  onDismiss?: () => void,
  top: number,
  dataList: any[]
}

type PageState = {
  isShow: boolean,
  sectionList: any[]
}

export default class GoodsFilter extends Component<PageProps, PageState> {

  static defaultProps = {
    top: 90
  }

  constructor () {
    super()
    this.state = {
      isShow: false,
      sectionList: []
    }
  }

  render () {
    const { top } = this.props
    const { isShow, sectionList } = this.state
    return (
      isShow ? (
        <View className='container' onTouchMove={this._handleEvent}>
          <View className='masker' onClick={this.dismiss}></View>
          <View className='content' style={`top: ${top}rpx;`}>
            <ScrollView className='main-scroll' scrollY>
              <View className="main-content">
                {
                  sectionList.map((item, index) => {
                    return (
                      <View className={`section ${index == sectionList.length - 1 ? '' : 'border-bottom_1px'}`} key={index}>
                        <View className="section-header">
                          <View className="title">{item.title}</View>
                        </View>
                        <View className="section-list">
                          {
                            item.items.map((innerItem, innerIndex) => {
                              return (
                                <View className={`list-item ${innerItem.selected ? 'list-item_sel' : ''}`} key={innerIndex} onClick={this.onOptionTaped.bind(this, index, innerIndex)}>
                                  <View className="title">{innerItem.title}</View>
                                </View>
                              )
                            })
                          }
                        </View>
                      </View>
                    )
                  })
                }
              </View>
            </ScrollView>
            <View className="main-bottom border-top_1px">
              <View className="btn-normal btn-reset" onClick={this.onResetBtnTaped}>
                <View className="title">重置</View>
              </View>
              <View className="btn-normal" onClick={this.onConfirmBtnTaped}>
                <View className="title">确定</View>
              </View>
            </View>
          </View>
        </View>
      ) : null
    )
  }

  _handleEvent = e => {
    e.stopPropagation()
  }

  dismiss = () => {
    this.props.onDismiss && this.props.onDismiss()
    this.setState({
      isShow: false
    })
  }

  show = (currentFilterList: any[] = []) => {
    currentFilterList = currentFilterList || []
    const { dataList = [] }  = this.props
    let list: any[] = []
    for (let i = 0; i < dataList.length; i++) {
      let sectionItem = dataList[i];
      let items = sectionItem.items || []

      let innerList: any[] = []
      let selectedSectionItem = currentFilterList.find(item => item.code == sectionItem.code) || {}
      let selectedItems = (selectedSectionItem.items || []).filter(item => item.selected)
      for(let j = 0; j < items.length; j++){
        let cellItem = items[j]
        innerList.push({
          title: cellItem,
          selected: selectedItems == 0 ? j == 0 : selectedItems.findIndex(item => item.title == cellItem) >= 0
        })
      }

      list.push({
        code: sectionItem.code,
        title: sectionItem.title,
        items: innerList
      })
    }

    this.setState({
      isShow: true,
      sectionList: list
    })
  }

  onOptionTaped = (sectionIndex: number, cellIndex: number) => {
    let { sectionList } = this.state
    let sectionItem = sectionList[sectionIndex]
    if (cellIndex == 0) {
      sectionItem.items = sectionItem.items.map(item => {
        item.selected = false
        return item
      })
      sectionItem.items[0].selected = true
    } else {
      sectionItem.items = sectionItem.items.map((item, index) => {
        if (cellIndex > 0 && index == cellIndex) {
          item.selected = !item.selected
        }
        return item
      })
      let selectedOptionList = sectionItem.items.filter((_, index) => index > 0).filter(item => item.selected)

      if (selectedOptionList.length == 0) {
        sectionItem.items[0].selected = true
      } else {
        sectionItem.items[0].selected = false
      }
    }

    this.setState({
      sectionList: sectionList
    })
  }

  onResetBtnTaped = () => {
    let { sectionList } = this.state
    sectionList = sectionList.map(section => {
      section.items = section.items.map((item, idx) => {
        item.selected = idx == 0
        return item
      })
      return section
    })
    this.setState({
      sectionList: sectionList
    })
  }

  onConfirmBtnTaped = () => {
    let { sectionList } = this.state
    this.props.onSelect && this.props.onSelect(sectionList)
  }
}
